<template>
  <el-form
    :model="baseInfoForm"
    ref="baseInfoForm"
    :rules="editBaseRule"
    label-width="120px"
    class="demo-ruleForm"
    size="small"
  >
    <one-row>

    </one-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="名称:" prop="name">
          <el-input
            v-model="baseInfoForm.name"
            placeholder="请输入工作流名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="名称KEY" prop="description">
          <el-input
            v-model="baseInfoForm.description"
            placeholder="请输入英文名字"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="限制表达式">
          <tooltipLable
            slot="label"
            label="限制表达式"
            content='默认"{}"，限制周期({"period":24} 24小时), 限制次数({"count":1}在限制周期内只允许提交1次), 限制级别({"level":1} 针对(1单个用户 2全局)限制周期限制次数,默认特定用户);允许特定人员提交({"allow_persons":"zhangsan,lisi"}只允许张三提交工单,{"allow_depts":"1,2"}只允许部门id为1和2的用户提交工单，{"allow_roles":"1,2"}只允许角色id为1和2的用户提交工单)'
          ></tooltipLable>
          <el-input
            v-model="baseInfoForm.limit_expression"
            placeholder="请设置展现表单字段"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="标题模板">
          <tooltipLable
                  slot="label"
                  label="标题模板"
                  content="用户新建工单时未传标题字段(及title字段)时，自动生生成标题。支持将工单字段作为参数写到模板中，如{creator}的请假申请，({date_start}-{date_end})"
          ></tooltipLable>
          <el-input
                  v-model="baseInfoForm.title_template"
                  placeholder="请设置标题模板"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row  :gutter="15">
      <el-col :span="12">
        <el-form-item label="查看校验权限">
          <tooltipLable
                  slot="label"
                  label="查看校验权限"
                  content="开启后，非对应工单关系人(创建人、当前处理人、曾经需要其处理的处理人)无查看工单详情的权限"
          ></tooltipLable>
          <el-switch
                  v-model="baseInfoForm.view_permission_check"
                  active-text="开启"
                  inactive-text="关闭"
          ></el-switch>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="是否显示流程图">
          <el-switch
                  v-model="baseInfoForm.show_flow"
                  active-text="开启"
                  inactive-text="关闭"
          ></el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row  :gutter="15">
      <el-col :span="12">
        <el-form-item label="提交需要选人">
          <el-switch
                  v-model="baseInfoForm.is_select"
                  active-text="开启"
                  inactive-text="关闭"
          ></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否选人">
          <el-radio-group v-model="baseInfoForm.select_checkbox">
            <el-radio :label="true">多选</el-radio>
            <el-radio :label="false">单选</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row  :gutter="15">
      <el-col :span="12">
        <el-form-item label="选人URL">
          <el-input
                  v-model="baseInfoForm.select_url"
                  placeholder="请输入选人URL"
                  style="width:100%"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="选人KEY">
          <el-input
                  v-model="baseInfoForm.select_key"
                  placeholder="请输入选人KEY"
                  style="width:100%"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <one-row>
      <el-form-item label="手机待办列表">
        <el-input
          v-model="baseInfoForm.duty_li_h5"
          placeholder="请输入手机待办列表地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机待办详情">
        <el-input
          v-model="baseInfoForm.duty_dt_h5"
          placeholder="请输入手机待办详情地址"
        ></el-input>
      </el-form-item>
    </one-row>
    <el-form-item label="PC待办列表">
      <el-input
        v-model="baseInfoForm.duty_li_pc"
        placeholder="请输入PC待办列表地址"
      ></el-input>
    </el-form-item>
    <el-form-item label="展现表单">
      <tooltipLable
        slot="label"
        label="展现表单"
        content='当用户只有查看权限，非当前处理人时，工单详情展示的字段信息，格式["gmt_created","title", "creator"]'
      ></tooltipLable>
      <el-input
        v-model="baseInfoForm.display_form_str"
        placeholder="请选择需要展示的字段"
        style="width: calc(100% - 25px)"
      ></el-input
      ><el-button
      type="text"
      size="mini"
      icon="el-icon-refresh-right"
      style="margin-left: 5px"
      @click="getFieldList"
    ></el-button>
    </el-form-item>
    <el-form-item label="通知内容模板">
      <el-input
        type="textarea"
        v-model="baseInfoForm.content_template"
        placeholder="描述"
      ></el-input>
    </el-form-item>
    <one-row>
      <el-form-item label="排序">
        <el-input-number
          v-model="baseInfoForm.no_order"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="颜色">
        <el-color-picker v-model="baseInfoForm.color"></el-color-picker>
      </el-form-item>
    </one-row>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-button type="primary" @click="submitBaseInfo()" size="small"
        >确定</el-button
      >
    </div>
  </el-form>
</template>
<script>
import api from "@/api/index";
import qs from "qs";
import tooltipLable from "@/components/workflows/tooltipLable";
export default {
  components: {
    tooltipLable
  },
  data() {
    return {
      baseInfoForm: {
        no_order:0,
        select_checkbox:false,
        show_flow:false,
        id: null,
        //内容通知模板
        content_template: "",
        //描述
        description: "",
        //展现表单
        display_form_str: "[]",
        //限制表达式
        limit_expression: "{}",
        //名称
        name: "",
        //标题模板
        title_template: "",
        //是否查看权限校验
        view_permission_check: false,
        //查看权限人
        view_persons: [],
        //查看权限部门
        view_depts: [],
        is_select:false,
        select_key:undefined,
        select_url:undefined,
        duty_li_pc:undefined,
        duty_li_h5:undefined,
        duty_dt_h5:undefined,
        color:"#000000"
      },
      editBaseRule: {
        name: [{ required: true, message: "请输入工作流名称", trigger: "blur" }],
        description: [{ required: true, message: "请输入名称KEY", trigger: "blur" }],
      },
      //通知类型列表
      noticesList: [],
      //简易用户列表
      simpleUserList: [],
      //简易部门列表
      simpleDeptList: [],
      id: this.$route.query.id
    };
  },
  created() {
    this.initData()
  },
  methods: {
    initData(){
      if (this.id) {
        this.getUserWorkflows();
      }
      this.getSimpleUser();
    },
    getFieldList() {
      api.getFieldSimple(this.id).then(res => {
            let list = res.data;
            let initList = ["sn", "title", "creator", "gmt_created"];
            let fieldList = list.map(item => {
              return item.field_key;
            });
            this.baseInfoForm.display_form_str = JSON.stringify(
              initList.concat(fieldList)
            );
        });
    },
    //获取用户列表(搜索)
    searchUser(val) {
      api.getSimpleUser(val).then(res => {
          //console.log(res.data.value);
          this.simpleUserList = res.data.value;
      });
    },
    //获取简易用户信息
    getSimpleUser() {
      api
        .getAllSimpleUser({ per_page: this.per_page, page: this.page })
        .then(res => {
            this.simpleUserList = res.data.value;
        });
    },
    //提交编辑或新增的数据
    submitBaseInfo() {
      this.$refs.baseInfoForm.validate(valid => {
        if (valid) {
          if(this.baseInfoForm.is_select&&!(this.baseInfoForm.select_key&&this.baseInfoForm.select_url)){
            this.msgError("选人KEY和选人URL不能为空！")
            return
          }
          if(this.baseInfoForm.view_depts){
            this.baseInfoForm.view_depts = this.baseInfoForm.view_depts.toString();
          }
          if(this.baseInfoForm.view_persons){
            this.baseInfoForm.view_persons = this.baseInfoForm.view_persons.toString();
          }
          if (this.baseInfoForm.id) {
            api.editWorkflows(this.baseInfoForm.id, this.baseInfoForm).then(res => {
              this.msgSuccess("编辑成功!");
              this.$router.go(-1);
            });
          } else {
            api.addWorkflows(this.baseInfoForm).then(res => {
              // //console.log(res);
              this.msgSuccess("添加成功!");
              this.$router.go(-1);
            });
          }
        }
      });
    },
    //如果是点击编辑进来的，则获取该工作流的信息
    getUserWorkflows() {
      api.getUserWorkflows(this.id).then(res => {
          this.id = res.data.id;
          this.baseInfoForm = res.data;
          if(res.data.view_depts)this.baseInfoForm.view_depts = res.data.view_depts.map(Number);
      });
    }
  }
};
</script>
